{% extends "base.html" %}

{% block title %}影院列表{% endblock %}

{% block content %}
<div class="container my-5">
    <div class="card animate-fade">
        <div class="card-header">
            <h2 class="mb-0"><i class="bi bi-building me-2"></i>影院列表</h2>
        </div>
        <div class="card-body">
            <div class="d-flex justify-content-between align-items-center">
    <h2 class="mb-0"><i class="bi bi-building me-2"></i>影院列表</h2>
    <div class="col-md-3">
        <select class="form-select" id="cinema-filter" onchange="filterCinemas()">
            <option value="">所有影院</option>
            {% for cinema in cinemas %}
            <option value="{{ cinema.id }}" 
                    {% if selected_cinema_id == cinema.id %}selected{% endif %}>
                {{ cinema.name }}
            </option>
            {% endfor %}
        </select>
    </div>
</div>
            <div class="row">
                {% for cinema in cinemas %}
                <div class="col-md-6 mb-4">
                    <div class="card h-100">
                        <div class="card-body">
                            <h4 class="card-title">{{ cinema.name }}</h4>
                            <p class="card-text">
                                <i class="bi bi-geo-alt"></i> {{ cinema.address }}<br>
                                <i class="bi bi-telephone"></i> {{ cinema.phone }}
                            </p>
                            <div class="mt-3">
                                <h5>当前场次</h5>
                                <ul class="list-group">
                                    {% set cinema_shows = shows|selectattr('cinema_id', 'equalto', cinema.id)|list %}
                                    {% if cinema_shows %}
                                        {% for show in cinema_shows[:3] %}
                                            {% set movie = movies|selectattr('id', 'equalto', show.movie_id)|first %}
                                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                                <div>
                                                    <strong>{{ movie.title }}</strong><br>
                                                    {{ show.start_time.strftime('%m-%d %H:%M') }} | {{ show.hall }} | ¥{{ show.price }}
                                                </div>
                                                <a href="{{ url_for('booking', show_id=show.id) }}" class="btn btn-sm btn-primary">
                                                    选座购票
                                                </a>
                                            </li>
                                        {% endfor %}
                                    {% else %}
                                        <li class="list-group-item">暂无场次信息</li>
                                    {% endif %}
                                </ul>
                            </div>
                        </div>
                        <div class="card-footer">
                            <a href="#" class="btn btn-outline-primary w-100">查看全部场次</a>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    function filterCinemas() {
        const cinemaId = document.getElementById('cinema-filter').value;
        if (cinemaId) {
            window.location.href = "{{ url_for('cinema_list') }}?cinema_id=" + cinemaId;
        } else {
            window.location.href = "{{ url_for('cinema_list') }}";
        }
    }
</script>
{% endblock %}